dynamic import

lazy loadingする

初期表示時に不要なものは最初から読み込まずに、

button押した時など必要になったタイミングで初めてその部分のchunkがfetchされる

使う

next/dynamic

import()

Dedicated Worker

別スレッドでDynamic importsする ref

Webpack

https://webpack.js.org/guides/code-splitting/#dynamic-imports

React.lazy

ECMAScriptにもある

https://github.com/tc39/proposal-dynamic-import

https://numb86-tech.hatenablog.com/entry/2020/01/04/131626

>#WIP

デメリット

https://www.quora.com/What-are-the-cons-of-dynamic-imports-a-k-a-code-splitting-JavaScript-files

https://github.com/vercel/next.js/discussions/32895

例えば、全部Dynamic importsにするとどの様な問題が起きるか？

開発コスト

若干気にすることが増えるので、無駄にdynamic importにする必要はない

対象物をloadingする時に待ちが発生する

でもこれは初回に待つか後で待つかの話mrsekut

chunkが増えるのでrequest数が増える

数自体は増えるけど、問題とは言えなくない？mrsekut

問題は時間なので

LCPを悪化させる #??

これはたぶんそんなことないと思う

他 #??

lazy loadingできることを確認する

対象のcomponentにconsole.logを仕込むとか

Networkパネルを見る

https://web.dev/code-splitting-with-dynamic-imports-in-nextjs/ で書いてる

#??

どのComponentをdynamic importするべきなのか

非同期的に読み込むComponent

つまり、初期表示に必要のないComponent

例えば、大きめのリストの子など

クリックした時に開くmodalとか

選択されていないタブの内容とか

SSRを回避する時

処理にbrwoserのAPIを使用する場合はerrorになるため、serverでは実行されないようにする

わかるけど、本質的な問題ではないだろうmrsekut

etc.

viewport外のComponentを全部Dynamic importするようにすればいいんじゃないの？

go to definition上手く動かなくなるのをどうにかできないものか

https://v8.dev/features/dynamic-import